<template>
	<view class="brand">
		<template>
				<strong><view class="brand-title">品牌制造商直供</view></strong>
		    <view>
		        <u-grid
		                :border="false"
		               
						col="2"
		        >
		            <u-grid-item
		                    v-for="(baseListItem,baseListIndex) in brandList"
		                    :key="baseListIndex"
							 @click="jump(baseListItem.id)"
		            >
		                <view class="image-box"><image class="_img"  :src="baseListItem.picUrl" mode=""></image></view>
		                <view class="grid-text ">
		                	<text class="grid-text-title">{{baseListItem.name}}\n</text>
							<text>{{baseListItem.floorPrice}}元起</text>
		                </view>
		            </u-grid-item>
		        </u-grid>
		        <u-toast ref="uToast" />
		    </view>
		</template>
		<view class="brand-title">周一周四.新品首发</view>
<!-- 		<view class="newProduct">
			<u-grid
			        :border="false"
			        @click="click"
					col="2"
			>
			    <u-grid-item
			            v-for="(baseListItem,baseListIndex) in newGoodsList"
			            :key="baseListIndex"
						@click="jump(baseListItem.id)"
			    >
			        <view class="image-box"><image class="_imgs"  :src="baseListItem.picUrl" mode=""></image></view>
			        <view class="newProduct-text ">
			        	<text class="newProduct-title">{{baseListItem.brief}}</text>
						<view class="newProduct-price">{{baseListItem.retailPrice}}元起</view>
			        </view>
			    </u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view> -->
		
	</view>
</template>
 
<script>
	export default {
		name:"Brand",
		props:['brandList','newGoodsList'],
		data() {
			return {
				   
			};
		},
		  methods: {
		            // click(name) {
		            //     this.$refs.uToast.success(`点击了第${name}个`)
		            // },
					//传id到详情
					jump(index){
						uni.navigateTo({
							url:'../../pages/productDetails/brandDetails?id='+index
						})
					}
		        }
	}
</script>

<style lang="scss" scoped>
	.brand{
		.brand-title{
			text-align: center;
			margin: 10px 0;
		}
	.image-box{
		height: 300rpx;
		._img{
			width: 360rpx;
			height: 290rpx;
			opacity: 0.8;
		}
	}
  .grid-text {
     
		position: absolute;
		top: 0;
		left: 0;
		font-size: 14px;
		padding: 40rpx;
		color: #ffffff; 
        box-sizing: border-box;
		.grid-text-title{
			font-size: 30rpx;
		}
    }
	.newProduct{
		margin:50rpx;
		.image-box{
			height: 200rpx;
			._imgs{
				width:200rpx;
				height: 190rpx;
			
			}
		}
	.newProduct-text{
		margin: 10px;
		.newProduct-title{
			font-size: 20rpx;
		}
		.newProduct-price{
			font-size: 20rpx;
			color: #F56723;
			text-align: center;
		}
	}	
	}
	}
</style>
